<template>
  <a-card class="body-container">
    <s-tool-bar>
      <template #right>
        <s-button v-if="authorize.insert" type="primary" icon="plus-outlined" @click="$refs.add.open()">新添事件</s-button>
      </template>
    </s-tool-bar>
    <!-- 日历 -->
    <a-calendar v-model="value">
      <template v-slot:dateCellRender="{ current: value }">
        <ul class="events">

          <a-tooltip placement="topLeft">
            <template #title>
              <p>{{ currentDetail.tasksTitle }}</p>
              <p>
                <span v-for="name of currentDetail.associateName" :key="name">{{ name + ' ' }}</span>
              </p>
              <p>{{ currentDetail.createTime }}</p>
            </template>
            <li v-for="item in getListData(value)" :key="item.tasksId" @mouseover="showDetail(item)">
              <a-badge :status="item.tasksType === 1 ? 'success' : 'warning'" :text="item.tasksTitle" />
            </li>
          </a-tooltip>

        </ul>
        <!-- <div class="detail" v-show="showDetailFlag">{{ currentDetail }}</div> -->
      </template>
      <!-- <template v-slot:monthCellRender="{ current: value }">
        <div v-if="getMonthData(value)" class="notes-month">
          <section>{{ getMonthData(value) }}</section>
          <span>Backlog number</span>
        </div>
      </template> -->
    </a-calendar>

    <detail ref="detail" />
    <add ref="add" @success="search" />
    <update ref="update" @success="search" />
  </a-card>
</template>

<script>
import { dateTypeFormat } from '@/utils/dateFormat'
import moment from 'moment';
const columns = []
import Detail from './detail/index.vue'
import Add from './add/index.vue'
import Update from './update/index.vue'
export default {
  name: 'QueryList',
  components: { Detail, Add, Update },
  data() {
    return {
      showDetailFlag: false, // 控制详情信息的显示与隐藏
      currentDetail: {}, // 存储当前鼠标移入日期的详情内容
      query: {},
      columns: columns,
      calendarData: [] // 新增的数据存储在这里
    }
  },
  authorize: '/modules/doorCalendarTasks/permissionList',
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.$api.GET('/modules/doorCalendarTasks/list').then(res => {
        res.data.forEach(item => {
          item.createTime = dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date(item.createTime));
        });
        this.calendarData = res.data
        console.log('日志任务列表', res.data);
      })
    },

    addCalendarData(data) {
      this.calendarData.push(data);
      console.log(this.calendarData);
    },

    getListData(value) {
      const date = value.date();
      const month = value.month();

      // Filter the calendarData based on date and month
      const listData = this.calendarData.filter(item => {
        const itemDate = moment(item.createTime).date();
        const itemMonth = moment(item.createTime).month();
        return itemDate === date && itemMonth === month;
      });

      return listData || [];
    },

    showDetail(item) {
      console.log(item);
      this.currentDetail = item; // 设置当前鼠标移入日期的详情内容
      this.showDetailFlag = true; // 显示详情信息
    },
    // getMonthData(value) {
    //   if (value.month() === 8) {
    //     return 1394;
    //   }
    // },
  },
  deleteMulti() {
    const keys = this.$refs.table.getSelectedKeys()
    if (keys.length > 0) {
      this.$loading(true)
      this.$api.DELETE('/modules/doorCalendarTasks/deleteMulti', { ids: keys.toString() }).then(() => {
        this.$loading(false)
        this.search()
      }).catch(() => {
        this.$loading(false)
      })
    }
  },
  search() {
    const _this = this
    const query = Object.assign({}, this.query)
    this.$refs.table.search(query)
  },
  deleteById(id) {
    this.$loading(true)
    this.$api.DELETE('/modules/doorCalendarTasks/delete', { id: id }).then(() => {
      this.$loading(false)
      this.search()
    }).catch(() => {
      this.$loading(false)
    })
  }
}
</script>

<style lang="less" scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}

.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}

.notes-month {
  text-align: center;
  font-size: 28px;
}

.notes-month section {
  font-size: 28px;
}

::v-deep(.ant-picker-calendar-full .ant-picker-panel .ant-picker-calendar-date-today) {
  background: lightblue;
}

::v-deep(.ant-radio-button-wrapper:last-child) {
  display: none;
}
</style>